<!--
 * @Author: shenya
 * @Date: 2023-09-09 15:20:28
 * @Description: 灌水账号点赞
-->
<template>
  <el-dialog
    :title="action === 'like' ? '灌水账号点赞' : '灌水账号评论'"
    :visible.sync="visible"
    width="800px"
    append-to-body
  >
    <el-row :gutter="20">
      <el-col :span="12">
        <section
          v-loading="tableLoading"
          class="user-wrapper"
        >
          <header class="user-header">
            <div style="margin-bottom: 5px">选择人员</div>
            <el-input
              v-model="keyword"
              class="search-input"
              placeholder="请输入账号"
              clearable
              @input="debouncedSearch"
            />
          </header>
          <div
            v-infinite-scroll="selectUser"
            class="user-list"
            :infinite-scroll-immediate="false"
            :infinite-scroll-disabled="noMore"
            :infinite-scroll-delay="400"
          >
            <el-checkbox-group
              v-if="company.length > 0"
              v-model="checkList"
            >
              <div>
                <li
                  v-for="(item, index) in company"
                  :key="index"
                >
                  <el-checkbox
                    :label="item.userId"
                    @change="change($event, item)"
                  >
                    <div>
                      <span>{{ item.nickname }}</span>
                      <span>({{ item.phone }})</span>
                    </div>
                  </el-checkbox>
                </li>
              </div>
            </el-checkbox-group>
            <el-empty
              v-else
              :image-size="100"
              description="暂无数据"
            ></el-empty>
          </div>
        </section>
      </el-col>
      <el-col :span="12">
        <div>已选人员</div>
        <div class="right-list">
          <div
            v-for="(item, index) in list"
            :key="index"
            class="right-li flex align-items sb"
          >
            <div>
              <span>{{ item.nickname }}</span>
              <span>({{ item.phone }})</span>
            </div>
            <div>
              <el-button
                class="el-icon-close"
                size="small"
                circle
                @click="del(index)"
              ></el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <template #footer>
      <el-button
        type="primary"
        :loading="loading"
        @click="submit"
      >
        {{ action === 'like' ? '提交批量点赞' : '提交批量用户' }}
      </el-button>
      <el-button @click="visible = false">取消</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { useDebounceFn } from '@vueuse/core';
import { selectUser, changelikeOrComment } from '@/api/core/dynamic';
import { LIKEORCOMMENT, CONTENT_TYPE } from '@/const/type';
import crudMixins from '@/mixins/crud';
export default {
  mixins: [crudMixins],
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    action: {
      type: String,
    },
    id: {
      type: String,
    },
    relativeType: {
      type: String,
    },
    choseList: {
      type: Array,
    },
  },
  data() {
    // 防抖搜索企业列表
    const debouncedSearch = useDebounceFn(() => {
      this.page.currentPage = 1;
      this.selectUser();
    }, 1000);
    return {
      debouncedSearch,
      tableLoading: false,
      company: [],
      checkList: [],
      keyword: '',
      noMore: false,
      list: [],
      loading: false,
      LIKEORCOMMENT,
      CONTENT_TYPE,
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.page.currentPage = 1;
        this.selectUser();
        if (this.action === 'comment') {
          if (this.choseList && this.choseList.length > 0) {
            this.checkList = this.choseList.map((item) => item.userId);
            this.list = [...this.choseList];
          }
        }
      } else {
        this.checkList = [];
        this.list = [];
        this.keyword = '';
      }
    },
  },
  methods: {
    async selectUser() {
      try {
        this.tableLoading = true;
        const params = {
          type: '3',
          nickname: this.keyword,
          size: 20,
          current: this.page.currentPage,
        };
        const res = await selectUser(params);
        this.tableLoading = false;
        if (this.page.currentPage === 1) {
          this.company = res.data.data.records;
        } else {
          this.company = this.company.concat(res.data.data.records);
        }
        this.page.total = res.data.data.total;
        if (this.company.length === this.page.total) {
          this.noMore = true;
        } else {
          this.page.currentPage++;
          this.noMore = false;
        }
      } catch (err) {
        this.tableLoading = false;
        throw new Error(err);
      }
    },
    change(event, item) {
      const index = this.list.findIndex((v) => v.userId === item.userId);
      if (index >= 0) {
        this.list.splice(index, 1);
      } else {
        this.list.push(item);
      }
    },
    //删除
    del(index) {
      this.checkList.splice(index, 1);
      this.list.splice(index, 1);
    },
    //批量点
    submit() {
      if (this.action === 'like') {
        if (this.list.length === 0) {
          this.$message.warning('请选择灌水账号');
        } else {
          this.$confirm(
            '将使用已选灌水账号进行批量点赞操作，确定进行批量点赞吗？',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          ).then(() => {
            const params = {
              relativeId: Number(this.id),
              relativeType: this.relativeType,
              creators: this.list.map((item) => Number(item.userId)),
            };
            changelikeOrComment(params).then(() => {
              this.$emit('success');
              this.visible = false;
            });
          });
        }
      } else {
        if (this.list.length === 0) {
          this.$message.warning('请选择用户');
        } else {
          this.$emit('selectUser', this.list);
          this.visible = false;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-checkbox__label {
  width: 270px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
::v-deep .el-button--small.is-circle {
  padding: 5px !important;
}
.user-wrapper {
  overflow: hidden;
  .search-input {
    width: 350px;
  }
}
.user-list {
  height: 350px;
  overflow: auto;
  margin: 20px 10px 20px 0;
  li {
    padding: 6px 5px;
    cursor: pointer;
    &:hover {
      background-color: #66b1ff;
    }
  }
  .el-checkbox {
    display: flex;
    align-items: center;
  }
  .el-checkbox__label {
    display: block;
    flex: 1;
  }
}
.right-list {
  margin-top: 55px;
  height: 350px;
  overflow: auto;
  .right-li {
    margin-bottom: 10px;
  }
}
</style>
